<template>
  <view class="router-view bcl-active container">
    <!-- 1、输入绑定邮箱 -->
    <view v-if="step === 1">
      <view class="container shadow bcl-white radius">
        <view class="mb-15 bold fz-15">绑定邮箱地址</view>
        <view class="uni-input bcl-white uni-input-email">
          <input type="text" placeholder="请输入邮箱号" v-model="email" />
        </view>
      </view>

      <view class="tips mt-40">
        <view class="bold">邮箱绑定成功后,您可以享有以下服务:</view>
        <view class="mt-10 cl-second"
          >找回密码,忘记密码时,可以使用邮件找回</view
        >
      </view>

      <button
        class="uni-button uni-button-lg uni-button-full mt-50"
        @click="send"
      >
        下一步
      </button>
    </view>

    <!-- 2、邮件已发送 -->
    <view v-else-if="step === 2">
      <view class="success-icon">
        <image
          src="/static/images/send_email.png"
          class="width height block"
          mode="widthFix"
        />
      </view>
      <view class="text-center fz-18 bold">邮件发送成功</view>
      <view class="text-center cl-second mt-15"
        >您的邮箱将收到一封确认邮件,请查收,击邮件中的确认链接即可完成邮箱绑定</view
      >

      <button
        class="uni-button uni-button-lg uni-button-full mt-50"
        @click="getAuthStatus('check')"
      >
        已查收邮件
      </button>

      <view class="text-center mt-20" @click="step = 4">未收到邮件</view>
    </view>

    <!-- 3、未收到邮件 -->
    <view class="lh-2" v-else-if="step === 4">
      <view class="bold">您发送的邮箱地址:</view>
      <view class="cl-second">{{ email }}</view>

      <view class="mt-20">
        <view>1 先确认此发送功能在此之前是否可以正常使用</view>
        <view>2 若正常使用,则再确认下接受Email的用户邮箱是否正确</view>
        <view>3 建议再次发送,可能由于Email延迟,需要等待片刻</view>
      </view>

      <button
        class="uni-button uni-button-lg uni-button-full mt-50"
        @click="send"
      >
        再次发送邮件
      </button>

      <!-- <view class="text-center mt-15">还是未收到？联系客服</view> -->
    </view>

    <!-- 绑定成功 -->
    <view class="success-dialog" v-if="successModal">
      <uni-dialog v-model="successModal" :show-btn="false" :showClose="false">
        <view slot="content">
          <view class="text-center middle">
            <text class="icon icon-success cl-main fz-24"></text>
            <text class="bold fz-16">恭喜，邮箱绑定成功</text>
          </view>

          <view
            class="bcl-active p-30 cl-main text-center mt-30 mb-20 bind-content radius"
          >
            <view class="bind-tag">绑定的邮箱</view>
            <text class="bold">{{ authInfo.email }}</text>
          </view>

          <view class="text-tip">
            <view class="mb-5">您可以享有以下服务</view>
            <view class="cl-second"
              >找回密码，忘记密码时，可以使用邮件找回，请牢记</view
            >
          </view>
        </view>
      </uni-dialog>
    </view>
  </view>
</template>

<script>
import { emailStatus, sendEmail } from "@/apis/user";
import uniDialog from "@/components/dialog";
import regexp from "@/utils/regexp";

export default {
  components: {
    uniDialog,
  },

  data() {
    return {
      successModal: false,
      step: 1, // 绑定步骤
      authInfo: {},
      email: "",
      // isUpdate: false
    };
  },

  onLoad(options) {
    // this.isUpdate = options.type == 'update';
    this.getAuthStatus();
  },

  methods: {
    async getAuthStatus(type) {
      let { code, data } = await emailStatus();
      if (code === 200) {
        this.authInfo = data;
        if (this.authInfo.step === 3 && this.authInfo.email)
          this.successModal = true;
        else if (type === "check") this.$toast("暂未绑定成功，请注意查收邮件");

        this.step = data.step;
        if (this.authInfo.email) this.email = this.authInfo.email;
      }
    },

    async send() {
      if (!regexp.email.test(this.email))
        return this.$toast("请输入正确的邮箱号");
      let params = {
        email: this.email,
      };
      let { code, data } = await sendEmail(params);
      if (code === 200) this.step = 2;
    },
  },
};
</script>

<style lang="scss" scoped>
.router-view {
  .bind-content {
    position: relative;

    .bind-tag {
      width: 200upx;
      height: 60upx;
      line-height: 60upx;
      position: absolute;
      left: 0;
      top: 0;
      transform: translateY(-50%);
      background: linear-gradient(to bottom, $color-warning, $color-danger 60%);
      color: $color-white;
      border-radius: 20upx 0 20upx 0;
    }
  }
  .success-icon {
    width: 200upx;
    margin: 20upx auto;
  }
}
</style>
